<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
    <!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--禁止浏览器自动的识别-电话号码-email--->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!--是否启用Web全屏-->
    <meta name="apple-mobile-web-app-capable" content='yes' />
    <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
    <!--设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content='black' />
    <link rel="stylesheet" href="../css/shopping.css">
    <title>Title</title>
    <script src="../js/ydfontsize.js"></script>
    <script src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <!-- 购物车 -->
    <div class="header">
        <div>购物车(<span class="zsl">0</span>)</div>
        <p>编辑</p>
    </div>
    <!-- 购物车物品 -->
    <div class="box">
        <div class="chaoshi">
            <div class="shouqi active"></div>
            天猫超市
        </div>
        <div class="section-box">
            <!-- 所有店铺 -->
            <div class="box-ul">
                <!-- 店铺名称 -->
                <div class="ul-top">
                    <!--&lt;!&ndash; 全选框 &ndash;&gt;-->
                    <!--<div class="shouqi"></div>-->
                    <!-- 店铺log -->
                    <img src="../img/heimao.png" alt="">
                    <!-- 店铺名称 -->
                    <span>美洲野牛旗舰店</span>
                    <img src="../img/right.png" alt="">
                    <!-- 领券 编辑 -->
                    <div class="lingquan">
                        <a href="#">领券</a>
                        <p></p>
                        <a href="#">编辑</a>
                    </div>
                </div>
                <!-- 店铺商品 -->
                <div class="shang">
                    <!-- 商品复选框 -->
                    <div class="check"></div>
                    <!-- 商品图片 -->
                    <img src="../img/bao.png" alt="">
                    <ul class="shang-xq">
                        <!-- 商品名称 -->
                        <li>美洲野牛商务男包真皮手提包牛皮单肩包斜挎包横款公文包电脑包</li>
                        <!-- 颜色 大小 -->
                        <li>黑色</li>
                        <!-- 单价 -->
                        <li>
                            <span>￥398</span>
                            <s>￥569</s>
                            <p>x <span class="dzsl">1</span></p>
                        </li>
                        <!-- 数量 加减 删除 -->
                        <li>
                            <button class="jian">-</button>
                            <input type="text" value="1" class="shuliang">
                            <button class="jia">+</button>
                            <button class="del">删除</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="section-box">
            <!-- 所有店铺 -->
            <div class="box-ul">
                <!-- 店铺名称 -->
                <div class="ul-top">
                    <!--&lt;!&ndash; 全选框 &ndash;&gt;-->
                    <!--<div class="shouqi"></div>-->
                    <!-- 店铺log -->
                    <img src="../img/heimao.png" alt="">
                    <!-- 店铺名称 -->
                    <span>美洲野牛旗舰店</span>
                    <img src="../img/right.png" alt="">
                    <!-- 领券 编辑 -->
                    <div class="lingquan">
                        <a href="#">领券</a>
                        <p></p>
                        <a href="#">编辑</a>
                    </div>
                </div>
                <!-- 店铺商品 -->
                <div class="shang">
                    <!-- 商品复选框 -->
                    <div class="check"></div>
                    <!-- 商品图片 -->
                    <img src="../img/bao.png" alt="">
                    <ul class="shang-xq">
                        <!-- 商品名称 -->
                        <li>美洲野牛商务男包真皮手提包牛皮单肩包斜挎包横款公文包电脑包</li>
                        <!-- 颜色 大小 -->
                        <li>黑色</li>
                        <!-- 单价 -->
                        <li>
                            <span>￥398</span>
                            <s>￥569</s>
                            <p>x <span class="dzsl">1</span></p>
                        </li>
                        <!-- 数量 加减 删除 -->
                        <li>
                            <button class="jian">-</button>
                            <input type="text" value="1" class="shuliang">
                            <button class="jia">+</button>
                            <button class="del">删除</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- 全选 总价 总数 结算总价 -->
    <div class="bottom">
        <div class="check"></div>
        <span class="quanxuan">全选</span>
        <span class="heji">合计：</span>
        <span class="zongjia">￥0</span>
        <div class="jiesuan">结算(<span>0</span>)</div>
    </div>
    <!-- 底部切换按钮 -->
    <div class="footer">
        <!-- 首页 -->
        <a href="">
            <img src="../img/sylog.png" alt="">
            <span>首页</span>
        </a>
        <!-- 物流 -->
        <a href="">
            <img src="../img/wllog.png" alt="">
            <span>物流</span>
        </a>
        <!-- 购物车 -->
        <a href="">
            <img src="../img/gwclog.png" alt="">
            <span>购物车</span>
        </a>
        <!-- 我的淘宝 -->
        <a href="">
            <img src="../img/wdlog.png" alt="">
            <span>我的淘宝</span>
        </a>
        <!-- 更多 -->
        <a href="">
            <img src="../img/gdlog.png" alt="">
            <span>更多</span>
        </a>
    </div>
</body>
</html>
<script>
    /* 天猫超市 收起 展开 */
    $('.chaoshi').click(function(){
        $('.section-box').toggle();
    });
    /* 购物车加按钮 */
    $('.box .jia').click(function(){
        var num = $(this).prev().val();
        num++;
        $(this).prev().val(num);
        $(this).parent().prev().find('.dzsl').text(num);
        hehe();
    });
    /* 购物车减按钮 */
    $('.box .jian').click(function(){
        var num = $(this).next().val();
        if($(this).next().val() == 1){
            $(this).next().val(1);
            $(this).parent().prev().find('.dzsl').text(1);
        }else{
            num--;
            $(this).next().val(num);
            $(this).parent().prev().find('.dzsl').text(num);
        }
        hehe();
    });
    /* 单个商品删除 */
    $('.box .del').click(function(){
        $(this).parent().parent().parent().parent().parent().remove();
    });
    /* 购物车总数量 */
    hehe();
    function hehe(){
        var zongh = 0;
        $('.dzsl').each(function(){
            zongh += parseInt($(this).html());
        });
        $('.zsl').html(zongh);
    }





    /* 获取购物车产品数量 */
//    $.ajax({
//        type:"get"
//        ,url:"http://47.92.37.168/supermarket/data/get_commodity_car.php"
//        ,async:true
//        ,data:{'user_phone':username}
//        ,dataType:"jsonp"
//        ,jsonp:"callback"
//        ,success:function(data){
//            console.log(data);
//        }
//    })
</script>